<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/goodsDetails.css">
    <link rel="stylesheet" href="../font_nx4w2dgra3g/iconfont.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/register copy.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 头部 -->
    <div class="con_nav">
        <div class="nav w1226">
            <ul class="nav_list">
                <li class="adad">
                    <!-- 登录 -->
                    <a href="javascript:;" class="login">登录</a>
                    <span class="sep">|</span>
                    <!-- 注册 -->
                    <a href="javascript:;" class="register">注册</a>
                </li>
                <li>
                    <a href="javascript:;" class="hy">xxx,欢迎你</a>
                </li>
                <li>
                    <a href="javascript:;">我的订单</a>
                </li>
                <li>
                    <a href="javascript:;">我的收藏</a>
                </li>
                <li class="shopCart">
                    <span class="iconfont icon-24gl-cartFull2"></span>
                    <a href="javascript:;">购物车
                        <!-- <span class="num">(0)</span> -->
                    </a>
                </li>
            </ul>

        </div>
    </div>

    <!-- 导航 -->
    <div class="con_header">
        <div class="header w1226">
            <img src="../img/logo.c8999c02.png" alt="">
            <ul class="header_list">
                <li><a href="../html/zhuye.html">首页</a></li>
                <li><a href="../html/allGoods.html">全部商品</a></li>
                <li><a href="javascript:;">关于我们</a></li>
            </ul>
            <div class="input">
                <input type="text" autocomplete="off" placeholder="请输入搜索内容" class="input_l">
                <div class="input_r">
                    <button type="button" class="input_r_button">
                        <span class="iconfont icon-fangdajing"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 内容 -->
    <div class="con_neirong">
        <div class="neirong w1226">
            <div class="neirong_l">
                <!-- <img src="../img/pic_21.png" alt="">
                <ul class="neirong_l_list">
                    <li>
                        <a href="javascript:;"><img src="//img14.360buyimg.com/n5/jfs/t1/196147/31/10856/104161/60dbcb60E6ec224bb/d786ee09bf8fd83a.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="//img14.360buyimg.com/n5/jfs/t1/196147/31/10856/104161/60dbcb60E6ec224bb/d786ee09bf8fd83a.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="//img14.360buyimg.com/n5/jfs/t1/196147/31/10856/104161/60dbcb60E6ec224bb/d786ee09bf8fd83a.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="//img14.360buyimg.com/n5/jfs/t1/196147/31/10856/104161/60dbcb60E6ec224bb/d786ee09bf8fd83a.jpg" alt=""></a>
                    </li>
                </ul> -->
            </div>
            <div class="neirong_r">
                <!-- <h1>Redmi 8</h1>
                <p>5000mAh超长续航 / 高通骁龙439八核处理器 / 4GB+64GB</p>
                <p>小米自营</p>
                <p>699元</p>
                <div class="pro_list">
                    <span class="pro_name">Redmi 8</span>
                    <span class="pro_price">
                        <span>699元</span>
                    <span class="pro_del">799元</span>
                    </span>
                    <h3 class="price_sum">总计：699元</h3>
                </div>
                <div class="btn">
                    <button class="add">加入购物车</button>
                    <button class="like">喜欢</button>
                </div> -->
            </div>

            <!-- 放大镜大盒子 -->
            <!-- <div class="shadow">
                <div class="shadow_r"> </div>
                <div class="bigImg"></div>
            </div> -->
            <div class="shadow">

                <img src="//img13.360buyimg.com/n1/s400x400_jfs/t1/167663/2/21018/78714/60828fe1Ee2099373/a4f6ea7b1df9056f.jpg"
                    alt="" class="bigImg">
            </div>
        </div>
    </div>


    <!-- 尾部 -->
    <div class="con_end">
        <div class="end w1226">
            <div class="end_seven">
                <span class="iconfont icon-anquan"><a href="">七天无理由退换货</a></span>
                <span class="iconfont icon-anquan"><a href="">满99元全场免邮</a></span>
                <span class="iconfont icon-anquan"><a href="">100%品质保证</a></span>
            </div>
            <p>
                <a href="">首页</a><span>|</span>
                <a href="">全部商品</a><span>|</span>
                <a href="">关于我们</a><span></span>
            </p>
            <p>商城版权所有 © 2012-2021</p>
        </div>
    </div>


    <!-- 登录弹框 -->
    <div class="loginBox">
        <p>登录<span class="loginBox_dl">×</span></p>
        <div class="denglu">
            <span class="iconfont icon-lianxiren"></span>
            <input type="text" class="denglu_zhanghao" placeholder="请输入账号">
        </div>

        <div class="pwd">
            <span class="iconfont icon-yanjing"></span>
            <input type="text" class="denglu_pwd" placeholder="请输入密码">
        </div>

        <div class="dl" id="dl">登录</div>
    </div>

    <!-- 注册弹框 -->
    <div class="registerBox">
        <p>注册<span class="registerBox_dl">×</span></p>
        <div class="zhuce">
            <span class="iconfont icon-lianxiren"></span>
            <input type="text" class="zhuce_zhanghao" placeholder="请输入账号">
        </div>

        <div class="pwds">
            <span class="iconfont icon-yanjing"></span>
            <input type="text" class="zhuce_pwd" placeholder="请输入密码">
        </div>

        <div class="pwdAgain">
            <span class="iconfont icon-yanjing"></span>
            <input type="text" class="zhuce_pwds" placeholder="请再次输入密码">
        </div>

        <div class="enter">注册</div>
    </div>

    <div id="mc"></div>
    <script>
        var tit_user = getCookie("user");
        if (tit_user) {
            $(".adad").hide();
            $(".hy").show().text(`${tit_user},欢迎你`);
            $(".hy").click(function () {
                if (confirm("确定退出登录吗?")) {
                    setCookie("user", `${tit_user}`, day = -1, path = "/");
                    $(".adad").show();
                    $(".hy").hide();
                }
            })
        }

        //判断是否有cookie 并跳转购物车页面
        $(".shopCart a").click(function () {
            if (document.cookie) {
                location.href = "../html/shoppingCar.html";
            } else {
                alert("请先登录");
            }
        })

        //判断是否有cookie 并跳我的收藏页面
        $(".nav_list li").eq(3).click(function () {
            if (document.cookie) {
                location.href = "../html/myLikeGoods.html";
            } else {
                alert("请先登录");
            }
        })
        var id = window.location.search.split("=")[1];
        if (id) {
            $.ajax({
                type: "get",
                url: `../php/goodsDetails.php`,
                data: {
                    id
                },
                dataType: "json",
                success: function (result) {
                    var {
                        list,
                        status,
                        msg
                    } = result;
                    console.log(list);
                    if (status) {
                        var {
                            goodsName,
                            goodsImg,
                            goodsPrice,
                            smallPicList,
                            bigPicList,
                            goodsDetail
                        } = list;

                        //left
                        $(".neirong_l").html(`
                            <div class="big">
                            <img src="${bigPicList[0]}" alt="" class="bigImg">
                            <div class="neirong_l_shadow"></div>
                        </div>
                            
                            <ul class="neirong_l_list">
                                <li>
                                    <a href="javascript:;"><img src="//img14.360buyimg.com/n5/jfs/t1/196147/31/10856/104161/60dbcb60E6ec224bb/d786ee09bf8fd83a.jpg" alt=""></a>
                                </li>
                                <li>
                                    <a href="javascript:;"><img src="//img14.360buyimg.com/n5/jfs/t1/196147/31/10856/104161/60dbcb60E6ec224bb/d786ee09bf8fd83a.jpg" alt=""></a>
                                </li>
                                <li>
                                    <a href="javascript:;"><img src="//img14.360buyimg.com/n5/jfs/t1/196147/31/10856/104161/60dbcb60E6ec224bb/d786ee09bf8fd83a.jpg" alt=""></a>
                                </li>
                                <li>
                                    <a href="javascript:;"><img src="//img14.360buyimg.com/n5/jfs/t1/196147/31/10856/104161/60dbcb60E6ec224bb/d786ee09bf8fd83a.jpg" alt=""></a>
                                </li>
                            </ul>`);
                        var smallImgHTML = "";
                        smallPicList.forEach(img => {
                            smallImgHTML += `<li><a href="javascript:;"><img src="https:${img}" alt=""></a></li>`
                        });
                        $(".neirong_l .neirong_l_list").html(smallImgHTML);



                        //rght
                        $(".neirong_r").html(`
                            <h1>${goodsName}</h1>
                            <p>5000mAh超长续航 / 高通骁龙439八核处理器 / 4GB+64GB</p>
                            <p>小米自营</p>
                            <p>${goodsPrice}元</p>
                            <div class="pro_list">
                                <span class="pro_name">${goodsName}</span>
                                <span class="pro_price">
                                    <span>${goodsPrice}元</span>
                                <span class="pro_del">9999元</span>
                                </span>
                                <h3 class="price_sum">总计：${goodsPrice}元</h3>
                            </div>
                            <div class="btn">
                                <button class="add">加入购物车</button>
                                <button class="like">喜欢</button>
                            </div>`);


                        //right bigImg
                        $(".neirong .shadow").html(`<img src="http:${bigPicList[0]}" class="neirong_r_bigImg">`);


                        $(".neirong_l_list li").mouseenter(function () {
                            var index = $(this).index();
                            var bigUrl = bigPicList[index];
                            $(".neirong_l .bigImg").prop("src", bigUrl);
                            $(".neirong .shadow img").prop("src", bigUrl)
                        })

                        $(".big").mouseenter(function () {
                            $(".neirong_l_shadow").show();
                            $(".neirong .shadow").show();
                        })

                        $(".big").mouseleave(function () {
                            $(".neirong_l_shadow").hide();
                            $(".neirong .shadow").hide();
                        })
                        var scale = $(".neirong_r_bigImg").width() / $(".bigImg").width();
                        $(".big").mousemove(function (e) {
                            var e = e || window.event;
                            var x = e.pageX - $(".neirong_l").parent()[0].offsetLeft - 1 - ($(".neirong_l_shadow")[0].clientWidth / 2);
                            var y = e.pageY - $(".neirong_l").parent()[0].offsetTop - 1 - ($(".neirong_l_shadow")[0].clientHeight / 2);
                            if (x < 0) {
                                x = 0
                            } else if (x > $(".big")[0].clientWidth - $(".neirong_l_shadow")[0].clientWidth) {
                                x = $(".big")[0].clientWidth - $(".neirong_l_shadow")[0].clientWidth;
                            }
                            if (y < 0) {
                                y = 0
                            } else if (y > $(".big")[0].clientHeight - $(".neirong_l_shadow")[0].clientHeight) {
                                y = $(".big")[0].clientHeight - $(".neirong_l_shadow")[0].clientHeight;
                            }
                            $(".neirong_l_shadow").css({
                                left: x + "px",
                                top: y + "px"
                            })

                            $(".neirong_r_bigImg").css({
                                left: -(scale * x) + "px"
                            });
                            $(".neirong_r_bigImg").css({
                                top: -(scale * y) + "px"
                            });
                        })


                        $(".add").click(function () {
                            var cookie = document.cookie;
                            console.log(cookie);
                            if (cookie) {
                                var {
                                    goodsId,
                                    goodsImg,
                                    goodsName,
                                    goodsPrice,

                                } = list;
                                var cookie = document.cookie;
                                var userName = cookie.split("=")[1];
                                console.log(list);
                                $.ajax({
                                    type: "get",
                                    url: "../php/shoppingCart.php",
                                    data: {
                                        goodsId,
                                        goodsImg,
                                        goodsName,
                                        goodsPrice,
                                        num: 1,
                                        userName
                                    },
                                    dataType: "json",
                                    success: function () {
                                        if (confirm("添加成功是否前往购物车页面结算")) {
                                            window.location.href = "../html/shoppingCar.html";
                                        }
                                    }
                                })
                            } else {
                                alert("请先登录");
                            }

                        })


                        $(".like").click(function () {

                            if ($(this).html() === "喜欢") {
                                console.log(111);
                                $(this).html("移出喜欢");
                                var {
                                    id,
                                    goodsId,
                                    goodsImg,
                                    goodsName,
                                    goodsPrice,
                                    goodsId
                                } = list;
                                var cookie = document.cookie;
                                var userName = cookie.split("=")[1];
                                $.ajax({
                                    type: "get",
                                    url: "../php/isMyLike.php",
                                    data: {
                                        id,
                                        goodsId,
                                        goodsImg,
                                        goodsName,
                                        goodsPrice,
                                        userName
                                    },
                                    dataType: "json",
                                    success: function () {
                                        var {
                                            status,
                                            msg,
                                        } = result;
                                        console.log(result);
                                        if (status) {
                                            alert("添加成功");
                                        }
                                    }
                                })
                            } else {
                                console.log(222);
                                $(this).html("喜欢");
                                var {
                                    goodsId,
                                    userName
                                } = list;
                                var cookie = document.cookie;
                                var userName = cookie.split("=")[1];
                                $.ajax({
                                    type: "get",
                                    url: "../php/isMyLikeDel.php",
                                    data: {
                                        userName,
                                        goodsId
                                    },
                                    dataType: "json",
                                    success: function () {
                                        var {
                                            status,
                                            msg,
                                        } = result;
                                        console.log(result);
                                        if (status) {
                                            alert("删除成功");
                                        }
                                    }
                                })
                            }
                        })

                    } else {
                        location.href = "../html/allGoods.html";
                    }
                }
            })
        } else {
            location.href = "../html/allGoods.html";
        }
    </script>
</body>

</html>